<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>儿童图书数据可视化</title>
    <link rel="shortcut icon"
          href="https://tse3-mm.cn.bing.net/th/id/OIP-C.QvJ4s3_DD22gd2jikT2OSgHaHa?rs=1&pid=ImgDetMain"
          type="image/x-icon">
</head>
<style>
    .chart-container {
        width: 100%;
        position: fixed;
        height: calc(100vh - 96px); /* 96px 为 Dialog 标题栏的高度 */
        overflow: auto;
    }

    .abow_dialog {
        display: flex;
        justify-content: center;
        align-items: Center;
        overflow: hidden;

        .el-dialog {
            margin: 0 auto !important;
            height: 100%;
            overflow: hidden;

            .el-dialog__body {
                position: absolute;
                left: 0;
                top: 54px;
                bottom: 0;
                right: 0;
                padding: 0;
                z-index: 1;
                overflow: hidden;
                overflow-y: auto;
            }
        }
    }

    .main {
        background: url("https://tse2-mm.cn.bing.net/th/id/OIP-C.3xdJNpmUjIcF6afLxZeYjQHaEo?rs=1&pid=ImgDetMain") no-repeat;
        background-size: cover;
    }
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@4.1.0/dist/echarts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@4.0.2"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
<body class="border">
<div id="app" style="width: 100%">
    <el-dialog
            title="数据图展示"
            center
            :visible.sync="flag1"
            class="abow_dialog"
            width="100%" height="100vh">
        <div style="width: 100%;height: 420px;margin: 0 auto" class="border">
            <v-chart :options="LinechartOptions" style="width:100%;height: 400px;margin: 0 auto"></v-chart>
        </div>
        <div style="width: 100%;height: 420px;margin: 0 auto" class="border">
            <v-chart :options="PiechartOptions" style="width:100%;height: 400px;margin: 0 auto"></v-chart>
        </div>
        <div style="width: 100%;height: 420px;margin: 0 auto" class="border">
            <v-chart :options="MonneychartOptions" style="width:100%;height: 400px;margin: 0 auto"></v-chart>
        </div>
        <div style="width: 100%;height: 420px;margin: 0 auto" class="border">
            <v-chart :options="DownchartOptions" style="width:100%;height: 400px;margin: 0 auto"></v-chart>
        </div>
        <div style="width: 100%;height: 420px;margin: 0 auto" class="border">
            <v-chart :options="BeforchartOptions" style="width:100%;height: 400px;margin: 0 auto"></v-chart>
        </div>
        <div style="width: 100%;height: 420px;margin: 0 auto" class="border">
            <v-chart :options="PubLinechartOptions" style="width:100%;height: 400px;margin: 0 auto"></v-chart>
        </div>
        <div style="width: 100%;height: 420px;margin: 0 auto" class="border">
            <v-chart :options="PubPiechartOptions" style="width:100%;height: 400px;margin: 0 auto"></v-chart>
        </div>
        <div style="width: 100%;height: 420px;margin: 0 auto" class="border">
            <v-chart :options="TimechartOptions" style="width:100%;height: 400px;margin: 0 auto"></v-chart>
        </div>
        <div style="width: 100%;height: 420px;margin: 0 auto" class="border">
            <v-chart :options="TimeBarchartOptions" style="width:100%;height: 400px;margin: 0 auto"></v-chart>
        </div>
    </el-dialog>
    <el-dialog
            title="数据图展示"
            center
            :visible.sync="flag"
            width="50%" height="50vh">
        <v-chart :options="chartOptions" style="width: 100%;height: 500px;margin: 0 auto"></v-chart>
    </el-dialog>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-8">
                <div class="text-start d-flex">
                    <input type="number" placeholder="请输入爬取页数" v-model="num" class="form-control"
                           style="width: 50%"/>
                    <el-button type="primary" @click="GetList" class="">获取</el-button>
                </div>
            </div>
            <div class="col-md-4">
                <div class="text-end">
                    <el-button type="warning" @click="GetAllShoW">整体数据分析</el-button>
                </div>
            </div>
        </div>
    </div>

    <el-table
            :data="pagedList"
            width="100%"
            height="85vh"
            style="width: 100%;height: 90vh"
            v-loading="Show"
            element-loading-text="正在加载数据"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)">
        <el-table-column
                label="序号" align="center">
            <template slot-scope="scope">
                {{(currentPage-1)*pageSize+scope.$index + 1}}
            </template>
        </el-table-column>
        <el-table-column label="书名" prop="name" align="center"></el-table-column>
        <el-table-column label="封面" align="center">
            <template slot-scope="scope">
                <el-image :src="scope.row.url" style="width: 200px;height: 200px"
                          class="img-fluid img-thumbnail"></el-image>
            </template>
        </el-table-column>
        <el-table-column label="作者" prop="author" align="center"></el-table-column>
        <el-table-column label="出版时间" prop="publish_time" align="center"></el-table-column>
        <el-table-column label="出版商" prop="publisher" align="center"></el-table-column>
        <el-table-column label="售价" align="center">
            <template slot-scope="scope">
                <el-tag type="success">￥{{scope.row.sell_price}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="进价" align="center">
            <template slot-scope="scope">
                <el-tag type="primary">￥{{scope.row.priceTit}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="描述" prop="topic" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column label="操作" prop="topic" align="center">
            <template slot-scope="scope">
                <el-button size="mini" type="warning" @click="ShowItem(scope.row)">展示</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="d-flex justify-content-center mt-3">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="List.length">
        </el-pagination>
    </div>
</div>
</body>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            num: '',
            List: [],
            Show: false,
            flag: false,
            flag1: false,
            currentPage:1,
            pageSize:10,
            item: {},
            chartOptions: {
                title: {
                    text: '单个作品降价趋势柱状图分析',
                    left: 'center' // 标题居中显示
                },
                tooltip: {},
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [],
                    type: 'bar',
                    barMaxHeight: 80
                }]
            },
            LinechartOptions: {
                title: {
                    text: '作者作品数量折线图分析',
                    left: 'center' // 标题居中显示
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [],
                        type: 'line',
                        smooth: true
                    }
                ]
            },
            TimechartOptions: {
                title: {
                    text: '作品随时间数量折线图分析',
                    left: 'center' // 标题居中显示
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [],
                        type: 'line',
                        smooth: true
                    }
                ]
            },
            TimeBarchartOptions: {
                title: {
                    text: '作品随时间数量柱状图分析',
                    left: 'center' // 标题居中显示
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [],
                        type: 'bar',
                        smooth: true
                    }
                ]
            },
            MonneychartOptions: {
                title: {
                    text: '书籍价格柱状图分析',
                    left: 'center' // 标题居中显示
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [],
                        type: 'bar',
                        smooth: true
                    }
                ]
            },
            DownchartOptions: {
                title: {
                    text: '书籍降价幅度柱状图分析',
                    left: 'center' // 标题居中显示
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [],
                        type: 'bar',
                        smooth: true
                    }
                ]
            },
            BeforchartOptions: {
                title: {
                    text: '书籍原价折线图分析分析',
                    left: 'center' // 标题居中显示
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [],
                        type: 'line',
                        smooth: true
                    }
                ]
            },
            PiechartOptions: {
                title: {
                    text: '作者作品数量饼图分析',
                    left: 'center' // 标题居中显示
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                series: [
                    {
                        name: '作品数量',
                        type: 'pie',
                        radius: '50%',
                        data: []
                    }
                ]
            },
            PubPiechartOptions: {
                title: {
                    text: '出版商出版作品数量饼图分析',
                    left: 'center' // 标题居中显示
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                series: [
                    {
                        name: '作品数量',
                        type: 'pie',
                        radius: '50%',
                        data: []
                    }
                ]
            },
            PubLinechartOptions: {
                title: {
                    text: '出版商出版作品数量柱状图图分析',
                    left: 'center' // 标题居中显示
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [],
                        type: 'bar',
                        smooth: true
                    }
                ]
            },
        },
        mounted() {

        },
        components: {
            'v-chart':
            window.VueECharts
        },
        computed: {
            totalPages() {
                console.log(Math.ceil(this.List.length / this.pageSize))
                return Math.ceil(this.List.length / this.pageSize); // 计算总页数
            },
            // 根据当前页数和每页显示条目数，返回分页后的数据
            pagedList() {
                const start = (this.currentPage - 1) * this.pageSize;
                const end = start + this.pageSize;
                return this.List.slice(start, end);
            },
        },
        methods: {
            // 每页显示条目数改变时的回调函数
            handleSizeChange(val) {
                this.pageSize = val;
            },
            // 当前页数改变时的回调函数
            handleCurrentChange(val) {
                this.currentPage = val;
            },
            GetAllShoW() {
                for (var i = 0; i < this.List.length; i++) {
                    this.MonneychartOptions.xAxis.data.push(this.List[i].name)
                    this.DownchartOptions.xAxis.data.push(this.List[i].name)
                    this.BeforchartOptions.xAxis.data.push(this.List[i].name)
                    this.MonneychartOptions.series[0].data.push(this.List[i].sell_price)
                    this.DownchartOptions.series[0].data.push(this.List[i].priceTit - this.List[i].sell_price)
                    this.BeforchartOptions.series[0].data.push(this.List[i].priceTit)
                    if (this.LinechartOptions.xAxis.data.includes(this.List[i].author)) {
                        for (var j = 0; j < this.LinechartOptions.xAxis.data.length; j++) {
                            if (this.LinechartOptions.xAxis.data[j] === this.List[i].author) {
                                this.LinechartOptions.series[0].data[j]++
                                this.PiechartOptions.series[0].data[j].value++
                            }
                        }
                    } else {
                        this.LinechartOptions.xAxis.data.push(this.List[i].author)
                        this.LinechartOptions.series[0].data.push(1)
                        this.PiechartOptions.series[0].data.push({name: this.List[i].author, value: 1})
                    }
                    if (this.PubLinechartOptions.xAxis.data.includes(this.List[i].publisher)) {
                        for (var j = 0; j < this.PubLinechartOptions.xAxis.data.length; j++) {
                            if (this.PubLinechartOptions.xAxis.data[j] === this.List[i].publisher) {
                                this.PubLinechartOptions.series[0].data[j]++
                                this.PubPiechartOptions.series[0].data[j].value++
                            }
                        }
                    } else {
                        this.PubLinechartOptions.xAxis.data.push(this.List[i].publisher)
                        this.PubLinechartOptions.series[0].data.push(1)
                        this.PubPiechartOptions.series[0].data.push({name: this.List[i].publisher, value: 1})
                    }
                    if (this.TimechartOptions.xAxis.data.includes(this.List[i].publish_time)) {
                        for (var j = 0; j < this.TimechartOptions.xAxis.data.length; j++) {
                            if (this.TimechartOptions.xAxis.data[j] === this.List[i].publish_time) {
                                this.TimechartOptions.series[0].data[j]++
                                this.TimeBarchartOptions.series[0].data[j]++
                            }
                        }
                    } else {
                        this.TimechartOptions.xAxis.data.push(this.List[i].publish_time)
                        this.TimechartOptions.series[0].data.push(1)
                        this.TimeBarchartOptions.xAxis.data.push(this.List[i].publish_time)
                        this.TimeBarchartOptions.series[0].data.push(1)
                    }
                }
                this.flag1 = true
            },
            ShowItem(it) {
                this.item = it
                s = [it.sell_price, it.priceTit]
                this.chartOptions.xAxis.data = ['售价', '进价']
                this.chartOptions.series[0].data = s
                this.flag = true
            }
            ,
            GetList() {
                this.Show = true
                let that = this
                axios.get('http://127.0.0.1:8000/book?num=' + this.num).then(response => {
                    that.List = response.data
                    console.log(that.List.length)
                    this.Show = false
                })
            }
        }
    })
</script>
</html>